<template>
  <div class="login-wrap">
      <img class="avatar" src="../../images/avatar.png" alt="">
      <div class="input-item box box-align-center">
          <div class="icon"></div>
          <input v-model="mobile" maxlength="20" type="number" placeholder="请输入手机号">
      </div>
      <div class="input-item box box-align-center">
          <div class="icon"></div>
          <input v-model="password" type="password" maxlength="20" placeholder="请输入密码">
      </div>
      <div @click="login" class="btn">登录</div>
      <div @click="linkTo('register')" class="btn register">注册</div>
      <div @click="linkTo('forget')" class="forget">忘记密码</div>
  </div>
</template>

<script>
let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");
export default {
  components: {
      
  },
  data () {
    return {
        mobile:common.getCookie('mobile')?common.getCookie('mobile'):'',
        password:common.getCookie('password')?common.getCookie('password'):'',
        sessionId:''
    }
  },
  mounted(){
   
  },
  methods:{
     linkTo(link){
        this.$router.push(link)
        
      },
      login(){
        if (!this.mobile) {
            this.$vux.toast.show({
                text: '账号不能为空',
                type:'cancel'
            })
            return;
        }
        if (!this.password) {
            this.$vux.toast.show({
                text: '密码不能为空',
                type:'cancel'
            })
            return;
        }
        let  url = CONSTANT.URL.USER.LOGIN,
            param = {
                mobile:this.mobile,
                password:this.password
            }
        common.requestAjax(url,param,{},(res)=>{
            if(res.status == 200){
                let sessionId = res.data.bussData.sessionId;
                common.setCookie("sessionId", sessionId);
                common.setCookie("mobile", this.mobile);
                common.setCookie("password", this.password);
                this.$vux.toast.show({
                    text: res.msg
                })
                this.$router.replace('/')
            }else{
              this.$vux.toast.show({
                    text:res.msg,
                    type:'cancel'
                })
            }
        })         
      }
  }
}
</script>

<style lang="scss">
    .login-wrap{
        width: 100%;
        height: 11.1rem;
        background-color: #000120;
        padding-top: 1rem;
        .avatar{
            width: 2.26rem;
            height: 2.26rem;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            margin: 0 auto .88rem;
            display: block;
        }
        .input-item{
            width: 5.6rem;
            height: .88rem;
            margin: 0 auto .43rem;
            background-color: #171834;
            border-radius: .44rem;
            -webkit-border-radius: .44rem;
            .icon{
                background-image: url(../../images/user.png);
                background-size: 100%;
                width: .34rem;
                height: .36rem;
                margin: 0 .25rem 0 .41rem;
            }
            &:nth-child(3){
                .icon{
                    background-image: url(../../images/password.png);
                    width: .3rem;
                    height: .36rem;
                    margin: 0 .31rem 0 .41rem;
                }   
            }
            input{
                height: .88rem;
                background-color: #171834;
                 border: 0;
                 font-size: .32rem;
                 color: #999;
                &:focus{
                    outline: 0;
                   
                }
            }
        }
        .btn{
            width: 5.7rem;
            height: .88rem;
            line-height: .88rem;
            text-align: center;
            margin: .65rem auto 0;
            background-color: #198AE7;
            color: #fff;
            font-size: .32rem;
            border-radius: .44rem;
            -webkit-border-radius: .44rem;
        }
        .btn.register{
            margin-top: .43rem;
            border: 1px solid #C6C6C6;
            background-color: #000120;
            color: #DEDEDE;

        }
        .forget{
            color: #D2D1D1;
            font-size: .28rem;
            text-align: center;
            margin-top: .29rem;
        }
    }
</style>
